<template>
  <div class="line_2">
    <div class="sort_title"><i class="icon"></i>分类</div>
    <el-tabs ref="tabsBox" v-model="sortTabsValue" class="sort_tabs" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in sortTabs" :key="item.dictValue" :label="item.dictValue" :name="item.dictValue">
      </el-tab-pane>
      <el-tab-pane v-if="!showAllBtn && boxHeight > 50" class="put_up" label="收起" name="收起"> </el-tab-pane>
    </el-tabs>
    <el-button
      v-if="showAllBtn"
      class="all_btn"
      icon="el-icon-arrow-down"
      @click="
        $refs.tabsBox.$el.style.height = 'auto'
        showAllBtn = false
      "
      >全部</el-button
    >
  </div>
</template>

<script>
import { requestSysDictList } from '@/api/home/indicator-center'

export default {
  data() {
    return {
      sortTabsValue: '全部',
      showAllBtn: false,
      sortTabs: [],
      boxHeight: 0,
    }
  },
  async created() {
    let res = await requestSysDictList({
      dictTypeCode: 'martix_type',
    })
    if (res.success) {
      this.sortTabs = [{ dictValue: '全部' }, ...res.data]
    }
  },
  mounted() {
    let that = this
    window.onresize = () => {
      return (() => {
        that.$refs.tabsBox.$el.style.height = 'auto'
        that.count()
      })()
    }

    setTimeout(() => {
      that.count()
    }, 1000)
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === '收起') {
        this.$refs.tabsBox.$el.style.height = '36px'
        this.showAllBtn = true
      } else {
        this.$emit('tab-click', tab)
      }
    },
    count() {
      let w = this.$refs?.tabsBox?.$el?.offsetWidth
      this.boxHeight = this.$refs?.tabsBox?.$el?.offsetHeight || 0
      if (this.boxHeight > 50) {
        this.showAllBtn = true
        this.$refs.tabsBox.$el.style.height = '36px'
      } else {
        this.showAllBtn = false
      }
      // this.tabsBox.length * 120
      // if (this.tabsBox.length * 120 > w) {
      //   this.showAllBtn = true
      // } else {
      //   this.showAllBtn = false
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.icon {
  width: 16px;
  height: 16px;
  background: url(../../assets/images/sort.png) no-repeat;
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -3px;
}
.all_btn {
  width: 107px;
  height: 32px;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.09);
  flex-grow: 0;
  flex-shrink: 0;
}
.sort_title {
  width: 102px;
  margin-right: 40px;
  height: 32px;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.09);
  text-align: center;
  line-height: 30px;
  flex-shrink: 0;
  flex-grow: 0;
}
.line_2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__nav {
  height: 44px;
  background: #f5f7fb;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 0px solid #e4e7ed;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border: none;
  color: #7a838e;
  width: auto;
  min-width: 107px;
  &.is-active {
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #ffffff;
    box-shadow: 0px 4px 0px 0px var(--primary-color);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid var(--primary-color);
    margin: 4px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: var(--primary-color);
  }
}
.sort_tabs {
  flex: 1;
  overflow: hidden;
}
::v-deep .sort_tabs .el-tabs__nav {
  height: auto;
  min-height: 33px;
  background: #fff;
  white-space: normal;
}
::v-deep .sort_tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
  width: auto;
  min-width: 107px;
  height: 32px;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.09);
  line-height: 32px;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 5px;
  vertical-align: top;
  &.is-active {
    width: auto;
    min-width: 107px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    margin: 0 20px 5px 0;
  }
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
#tab-收起 {
  border: none;
  color: var(--primary-color);
}
</style>
<style lang="scss">
#tab-收起 {
  border: none;
  color: var(--primary-color);
}
</style>
